import React, { useState, useRef } from'react';

const App = () => {
   
    const [searchTerm, setSearchTerm] = useState('');
   
    const [history, setHistory] = useState([]);

    const [hotTopics, setHotTopics] = useState([
        { title: '奶茶究竟应该怎么扔?', rank: 'TOP1' },
        { title: '垃圾分类', rank: 'TOP2' },
        { title: '回收时间表', rank: 'TOP3' },
        { title: '怎么识别垃圾种类?', rank: 'TOP4' }
    ]);

  
    const [searchResults, setSearchResults] = useState([
        { name: '奶茶', image: 'https://img2.baidu.com/it/u=3045185606,3899692985&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667' },
        { name: '珍珠奶茶', image: 'https://img2.baidu.com/it/u=3045185606,3899692985&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667' },
        { name: '干垃圾', image: 'https://img0.baidu.com/it/u=4193458013,2280424269&fm=253&fmt=auto?w=937&h=519' },
        { name: '奶茶三兄弟', image: 'https://img2.baidu.com/it/u=3045185606,3899692985&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667' }
    ]);
    
    const [exchangeProducts, setExchangeProducts] = useState([
        { name: '奶茶粉', image: 'https://img2.baidu.com/it/u=3045185606,3899692985&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667' },
        { name: '奶茶杯', image: 'https://img2.baidu.com/it/u=3045185606,3899692985&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667' },
    ]);
    
    const [discussions, setDiscussions] = useState([
        '奶茶究竟应该怎么扔?',
        '珍珠奶茶里面的珍珠怎么处理?',
        '自制奶茶的材料应该怎么处理?'
    ]);

    
    const [showSearchData, setShowSearchData] = useState(false);
   
    const deleteModalRef = useRef(null);

    
    const handleSearch = () => {
        const trimmedSearchTerm = searchTerm.trim();
        if (trimmedSearchTerm) {
            
            setShowSearchData(true);
            console.log('搜索:', trimmedSearchTerm);
            if (!history.includes(trimmedSearchTerm)) {
                
                setHistory([...history, trimmedSearchTerm]);
            }

            
            const filteredSearchResults = searchResults.filter(result =>
                result.name.toLowerCase().includes(trimmedSearchTerm.toLowerCase())
            );
            
            const filteredExchangeProducts = exchangeProducts.filter(product =>
                product.name.toLowerCase().includes(trimmedSearchTerm.toLowerCase())
            );
         
            const filteredDiscussions = discussions.filter(discussion =>
                discussion.toLowerCase().includes(trimmedSearchTerm.toLowerCase())
            );

            setSearchResults(filteredSearchResults);
            setExchangeProducts(filteredExchangeProducts);
            setDiscussions(filteredDiscussions);
        }
    };


    const clearSearchTerm = () => {
        setSearchTerm('');
       
        setShowSearchData(false);
       
        setSearchResults([
            { name: '奶茶', image: 'https://img2.baidu.com/it/u=3045185606,3899692985&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667' },
            { name: '珍珠奶茶', image: 'https://img2.baidu.com/it/u=3045185606,3899692985&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667' },
            { name: '干垃圾', image: 'https://img0.baidu.com/it/u=4193458013,2280424269&fm=253&fmt=auto?w=937&h=519' },
            { name: '奶茶三兄弟', image: 'https://img2.baidu.com/it/u=3045185606,3899692985&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667' }
        ]);
        setSearchResults([
            { name: '干垃圾', image: 'https://img0.baidu.com/it/u=4193458013,2280424269&fm=253&fmt=auto?w=937&h=519' },
            
        ]);
        setExchangeProducts([
            { name: '奶茶粉', image: 'https://img2.baidu.com/it/u=3045185606,3899692985&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667' },
            { name: '奶茶杯', image: 'https://img2.baidu.com/it/u=3045185606,3899692985&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667' },
        ]);
        setDiscussions([
            '奶茶究竟应该怎么扔?',
            '珍珠奶茶里面的珍珠怎么处理?',
            '自制奶茶的材料应该怎么处理?'
        ]);
    };

   
    const clearHistory = () => {
        deleteModalRef.current.style.display = 'flex';
    };

    const confirmDeleteHistory = () => {
        setHistory([]);
        deleteModalRef.current.style.display = 'none';
    };

   
    const cancelDeleteHistory = () => {
        deleteModalRef.current.style.display = 'none';
    };

  
    const handleHistoryClick = (item) => {
        setSearchTerm(item);
        handleSearch();
    };

    return (
        <div style={{ padding: '20px' }}>
            <div style={{ display: 'flex', alignItems: 'center', marginBottom: '20px' }}>
                <input
                    type="text"
                    placeholder=""
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                    style={{ flex: 1, padding: '10px', border: '1px solid #ccc', borderRadius: '5px', marginRight: '10px' }}
                />
                <button onClick={clearSearchTerm} style={{ padding: '10px 20px', backgroundColor: 'transparent', color: 'gray', border: 'none', borderRadius: '5px' }}>
                    清除
                </button>
                <button onClick={handleSearch} style={{ padding: '10px 20px', backgroundColor: '#007bff', color: 'white', border: 'none', borderRadius: '5px' }}>
                    搜索
                </button>
            </div>
            {showSearchData && (
                <>
                    <h3 style={{ marginBottom: '10px' }}>搜索结果</h3>
                    {searchResults.map((result, index) => (
                        <div key={index} style={{ display: 'flex', alignItems: 'center', padding: '10px 0', borderBottom: '1px solid #ccc' }}>
                            <img src={result.image} alt={result.name} style={{ width: '50px', height: '50px', marginRight: '10px' }} />
                            <div style={{ color: 'pink' }}>{result.name}</div>
                        </div>
                    ))}
                    <h3 style={{ marginBottom: '10px' }}>可兑换商品</h3>
                    {exchangeProducts.map((product, index) => (
                        <div key={index} style={{ display: 'flex', alignItems: 'center', padding: '10px 0', borderBottom: '1px solid #ccc' }}>
                            <img src={product.image} alt={product.name} style={{ width: '50px', height: '50px', marginRight: '10px' }} />
                            <div style={{ color: 'pink' }}>{product.name}</div>
                        </div>
                    ))}
                    <h3 style={{ marginBottom: '10px' }}>讨论</h3>
                    {discussions.map((discussion, index) => (
                        <div key={index} style={{ padding: '10px 0', borderBottom: '1px solid #ccc' }}>{discussion}</div>
                    ))}
                </>
            )}
            {!showSearchData && (
                <>
                    {history.length > 0 && (
                        <div style={{ marginBottom: '20px' }}>
                            <h3 style={{ marginBottom: '10px' }}>历史搜索</h3>
                            <div style={{ display: 'flex', flexWrap: 'wrap' }}>
                                {history.map((item, index) => (
                                    <div
                                        key={index}
                                        style={{ padding: '8px 15px', backgroundColor: '#e6f7ff', borderRadius: '20px', marginRight: '10px', marginBottom: '10px', cursor: 'pointer' }}
                                        onClick={() => handleHistoryClick(item)}
                                    >
                                        {item}
                                    </div>
                                ))}
                            </div>
                            <button
                                onClick={clearHistory}
                                style={{ backgroundColor: 'transparent', border: 'none', cursor: 'pointer', marginTop: '10px' }}
                            >
                               <img src="https://img2.baidu.com/it/u=2118953262,1286691339&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800" alt="" style={{ width: '20px', height: '20px'}}/>
                            </button>
                        </div>
                    )}
                    <div>
                        <h3 style={{ marginBottom: '10px' }}>热门讨论</h3>
                        <div style={{ display: 'flex', flexDirection: 'column' }}>
                            {hotTopics.map((topic, index) => (
                                <div
                                    key={index}
                                    style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '10px 0', borderBottom: '1px solid #ccc' }}
                                >
                                    <div>{topic.title}</div>
                                    <div>{topic.rank}</div>
                                </div>
                            ))}
                        </div>
                    </div>
                </>
            )}
            {/* 删除确认弹窗 */}
            <div
                ref={deleteModalRef}
                style={{
                    display: 'none',
                    position: 'fixed',
                    top: 0,
                    left: 0,
                    right: 0,
                    bottom: 0,
                    backgroundColor: 'rgba(0, 0, 0, 0.5)',
                    justifyContent: 'center',
                    alignItems: 'center'
                }}
            >
                <div
                    style={{
                        backgroundColor: 'white',
                        borderRadius: '10px',
                        padding: '20px',
                        width: '300px'
                    }}
                >
                    <h4 style={{ marginBottom: '10px' }}>确认删除历史记录？</h4>
                    <div style={{ display: 'flex', justifyContent: 'space-around' }}>
                        <button onClick={confirmDeleteHistory} style={{ padding: '8px 15px', backgroundColor: '#007bff', color: 'white', border: 'none', borderRadius: '5px' }}>
                            确认
                        </button>
                        <button onClick={cancelDeleteHistory} style={{ padding: '8px 15px', backgroundColor: 'transparent', color: 'gray', border: 'none', borderRadius: '5px' }}>
                            取消
                        </button>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default App;